<?php
/**
 * Created by PhpStorm.
 * User: 式神 (luck48.com)
 * Email: 289650682@qq.com
 * Name: ${NAME}Administrator
 * Date: 2017-03-20
 * Time: 14:32
 */
?>
@extends('admin.layouts')
@section('style')
<style type="text/css">
    .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        cursor: pointer;
    }
    /** 重置表格元素 **/
    table { border-collapse: collapse; border-spacing: 0; }

    /* 清除浮动 */
    .ks-clear:after, .clear:after {
        content: '\20';
        display: block;
        height: 0;
        clear: both;
    }
    .ks-clear, .clear {
        *zoom: 1;
    }

    .main {
        margin: 0 auto;
    }
    .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}

    .helps{margin-top:40px;}
    .helps pre{
        padding:20px;
        margin:10px 0;
        border:solid 1px #e7e1cd;
        background-color: #fffdef;
        overflow: auto;
    }

    .icon_lists{
        width: 100% !important;

    }

    .icon_lists li{
        float:left;
        width:12.2vw;
        height:11vw;
        text-align: center;
        list-style: none !important;
    }
    .icon_lists .icon{
        font-size: 42px;
        color:#333;
        -webkit-transition: font-size 0.25s ease-out 0s;
        -moz-transition: font-size 0.25s ease-out 0s;
        transition: font-size 0.25s ease-out 0s;

    }
    .icon_lists .icon:hover{
        font-size:60px;
    }


    .code{display: none;}
    .markdown {
        color: #666;
        font-size: 14px;
        /*line-height: 1.8;*/
    }

    .highlight {
        line-height: 1.5;
    }

    .markdown img {
        vertical-align: middle;
        max-width: 100%;
    }

    .markdown h1 {
        color: #404040;
        font-weight: 500;
        line-height: 40px;
        margin-bottom: 24px;
    }

    .markdown h2,
    .markdown h3,
    .markdown h4,
    .markdown h5,
    .markdown h6 {
        color: #404040;
        margin: 1.6em 0 0.6em 0;
        font-weight: 500;
        clear: both;
    }

    .markdown h1 {
        font-size: 28px;
    }

    .markdown h2 {
        font-size: 22px;
    }

    .markdown h3 {
        font-size: 16px;
    }

    .markdown h4 {
        font-size: 14px;
    }

    .markdown h5 {
        font-size: 12px;
    }

    .markdown h6 {
        font-size: 12px;
    }

    .markdown hr {
        height: 1px;
        border: 0;
        background: #e9e9e9;
        margin: 16px 0;
        clear: both;
    }

    .markdown p,
    .markdown pre {
        margin: 1em 0;
    }

    .markdown > p,
    .markdown > blockquote,
    .markdown > .highlight,
    .markdown > ol,
    .markdown > ul {
        width: 80%;
    }

    .markdown ul > li {
        list-style: circle;
    }

    .markdown > ul li p,
    .markdown > ol li p {
        margin: 0.6em 0;
    }

    .markdown ol > li {
        list-style: decimal;
    }

    .markdown > ol li,
    .markdown blockquote ol > li {
        margin-left: 20px;
        padding-left: 4px;
    }

    .markdown code {
        margin: 0 3px;
        padding: 0 5px;
        background: #eee;
        border-radius: 3px;
    }

    .markdown pre {
        border-radius: 6px;
        background: #f7f7f7;
        padding: 20px;
    }

    .markdown pre code {
        border: none;
        background: #f7f7f7;
        margin: 0;
    }

    .markdown strong,
    .markdown b {
        font-weight: 600;
    }

    .markdown > table {
        border-collapse: collapse;
        border-spacing: 0px;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 95%;
        margin-bottom: 24px;
    }

    .markdown > table th {
        white-space: nowrap;
        color: #333;
        font-weight: 600;

    }

    .markdown > table th,
    .markdown > table td {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left;
    }

    .markdown > table th {
        background: #F7F7F7;
    }

    .markdown blockquote {
        font-size: 90%;
        color: #999;
        border-left: 4px solid #e9e9e9;
        padding-left: 0.8em;
        margin: 1em 0;
        font-style: italic;
    }

    .markdown blockquote p {
        margin: 0;
    }

    .markdown .anchor {
        opacity: 0;
        transition: opacity 0.3s ease;
        margin-left: 8px;
    }

    .markdown .waiting {
        color: #ccc;
    }

    .markdown h1:hover .anchor,
    .markdown h2:hover .anchor,
    .markdown h3:hover .anchor,
    .markdown h4:hover .anchor,
    .markdown h5:hover .anchor,
    .markdown h6:hover .anchor {
        opacity: 1;
        display: inline-block;
    }

    .markdown > br,
    .markdown > p > br {
        clear: both;
    }
    pre{
        background: #fff;
    }
</style>
@endsection
@section('main')
    <div class="main markdown">
        <ul class="icon_lists clearfix">
            <li>
                <i class="icon iconfont">&#xe60d;</i>
                <div class="code">&amp;#xe60d;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe60a;</i>
                <div class="code">&amp;#xe60a;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe63a;</i>
                <div class="code">&amp;#xe63a;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe60f;</i>
                <div class="code">&amp;#xe60f;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe64b;</i>
                <div class="code">&amp;#xe64b;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe64c;</i>
                <div class="code">&amp;#xe64c;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe611;</i>
                <div class="code">&amp;#xe611;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe631;</i>
                <div class="code">&amp;#xe631;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe610;</i>
                <div class="code">&amp;#xe610;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe696;</i>
                <div class="code">&amp;#xe696;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe74d;</i>
                <div class="code">&amp;#xe74d;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe60c;</i>
                <div class="code">&amp;#xe60c;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe632;</i>
                <div class="code">&amp;#xe632;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe64a;</i>
                <div class="code">&amp;#xe64a;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe649;</i>
                <div class="code">&amp;#xe649;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe612;</i>
                <div class="code">&amp;#xe612;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe6bc;</i>
                <div class="code">&amp;#xe6bc;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe653;</i>
                <div class="code">&amp;#xe653;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe60b;</i>
                <div class="code">&amp;#xe60b;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe613;</i>
                <div class="code">&amp;#xe613;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe62c;</i>
                <div class="code">&amp;#xe62c;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe62f;</i>
                <div class="code">&amp;#xe62f;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe63b;</i>
                <div class="code">&amp;#xe63b;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe63c;</i>
                <div class="code">&amp;#xe63c;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe63d;</i>
                <div class="code">&amp;#xe63d;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe63e;</i>
                <div class="code">&amp;#xe63e;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe640;</i>
                <div class="code">&amp;#xe640;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe642;</i>
                <div class="code">&amp;#xe642;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe668;</i>
                <div class="code">&amp;#xe668;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe651;</i>
                <div class="code">&amp;#xe651;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe652;</i>
                <div class="code">&amp;#xe652;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe669;</i>
                <div class="code">&amp;#xe669;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe6a1;</i>
                <div class="code">&amp;#xe6a1;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe639;</i>
                <div class="code">&amp;#xe639;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe617;</i>
                <div class="code">&amp;#xe617;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe656;</i>
                <div class="code">&amp;#xe656;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe659;</i>
                <div class="code">&amp;#xe659;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe615;</i>
                <div class="code">&amp;#xe615;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe607;</i>
                <div class="code">&amp;#xe607;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe647;</i>
                <div class="code">&amp;#xe647;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe662;</i>
                <div class="code">&amp;#xe662;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe616;</i>
                <div class="code">&amp;#xe616;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe618;</i>
                <div class="code">&amp;#xe618;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe635;</i>
                <div class="code">&amp;#xe635;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe654;</i>
                <div class="code">&amp;#xe654;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe648;</i>
                <div class="code">&amp;#xe648;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe683;</i>
                <div class="code">&amp;#xe683;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe655;</i>
                <div class="code">&amp;#xe655;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe670;</i>
                <div class="code">&amp;#xe670;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe672;</i>
                <div class="code">&amp;#xe672;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe674;</i>
                <div class="code">&amp;#xe674;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe676;</i>
                <div class="code">&amp;#xe676;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe679;</i>
                <div class="code">&amp;#xe679;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe67a;</i>
                <div class="code">&amp;#xe67a;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe681;</i>
                <div class="code">&amp;#xe681;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe682;</i>
                <div class="code">&amp;#xe682;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe689;</i>
                <div class="code">&amp;#xe689;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe68a;</i>
                <div class="code">&amp;#xe68a;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe68b;</i>
                <div class="code">&amp;#xe68b;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe690;</i>
                <div class="code">&amp;#xe690;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe636;</i>
                <div class="code">&amp;#xe636;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe608;</i>
                <div class="code">&amp;#xe608;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe62b;</i>
                <div class="code">&amp;#xe62b;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe645;</i>
                <div class="code">&amp;#xe645;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe609;</i>
                <div class="code">&amp;#xe609;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe600;</i>
                <div class="code">&amp;#xe600;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe601;</i>
                <div class="code">&amp;#xe601;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe602;</i>
                <div class="code">&amp;#xe602;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe603;</i>
                <div class="code">&amp;#xe603;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe604;</i>
                <div class="code">&amp;#xe604;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe605;</i>
                <div class="code">&amp;#xe605;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe606;</i>
                <div class="code">&amp;#xe606;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe60e;</i>
                <div class="code">&amp;#xe60e;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe619;</i>
                <div class="code">&amp;#xe619;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe61a;</i>
                <div class="code">&amp;#xe61a;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe61b;</i>
                <div class="code">&amp;#xe61b;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe61c;</i>
                <div class="code">&amp;#xe61c;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe61d;</i>
                <div class="code">&amp;#xe61d;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe61e;</i>
                <div class="code">&amp;#xe61e;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe61f;</i>
                <div class="code">&amp;#xe61f;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe620;</i>
                <div class="code">&amp;#xe620;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe621;</i>
                <div class="code">&amp;#xe621;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe641;</i>
                <div class="code">&amp;#xe641;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe622;</i>
                <div class="code">&amp;#xe622;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe623;</i>
                <div class="code">&amp;#xe623;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe624;</i>
                <div class="code">&amp;#xe624;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe625;</i>
                <div class="code">&amp;#xe625;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe626;</i>
                <div class="code">&amp;#xe626;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe627;</i>
                <div class="code">&amp;#xe627;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe628;</i>
                <div class="code">&amp;#xe628;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe629;</i>
                <div class="code">&amp;#xe629;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe62a;</i>
                <div class="code">&amp;#xe62a;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe62d;</i>
                <div class="code">&amp;#xe62d;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe62e;</i>
                <div class="code">&amp;#xe62e;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe633;</i>
                <div class="code">&amp;#xe633;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe634;</i>
                <div class="code">&amp;#xe634;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe638;</i>
                <div class="code">&amp;#xe638;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe63f;</i>
                <div class="code">&amp;#xe63f;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe643;</i>
                <div class="code">&amp;#xe643;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe644;</i>
                <div class="code">&amp;#xe644;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe646;</i>
                <div class="code">&amp;#xe646;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe69f;</i>
                <div class="code">&amp;#xe69f;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe630;</i>
                <div class="code">&amp;#xe630;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe637;</i>
                <div class="code">&amp;#xe637;</div>
            </li>

            <li>
                <i class="icon iconfont">&#xe64d;</i>
                <div class="code">&amp;#xe64d;</div>
            </li>
        </ul>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['jquery'],function() {
            var $ = layui.jquery;
            var num={{$index?$index:-1}};
            $('.icon_lists li').on('click',function(){
                var icon=$(this).find('.code').text();
                var icons=$(this).find('.iconfont').text();
                var index = parent.layer.getFrameIndex(window.name);
                if(num<0){
                    $("#iconfont", parent.document).text(icons);
                    $("input[name='iconfont']", parent.document).val(icon);
                }else{
                    var lframe='layui-layer-iframe'+num;
                    var fname=parent.window[lframe];
                    $("#iconfont",fname.document).text(icons);
                    $("input[name='iconfont']", fname.document).val(icon);
                }
                parent.layer.close(index);
            })
        })
    </script>
@endsection
